Vue.component('model', {
			    props: ['list', 'isactive'],
				//用子组件展示新增和修改的信息
			    template: `<div class="overlay" v-show="isactive">
			                <div class="con">
			                    <div class="content">
			                        <table class="overlay_table">
									<tbody>
			                            <tr>
			                                <td>姓名</td>
			                                <td><input type="text" v-model="modifylist.username" class="shuru"></td>
			                            </tr>
			                            <tr>
			                                <td>学号</td>
			                                <td><input type="text" v-model="modifylist.no" class="shuru"></td>
			                            </tr>
			                            <tr>
			                                <td>性别</td>
			                                <td>
			                                    <label><input type="radio" name="sex" value="男" v-model="modifylist.sex" class="xuanze">男</label>
			                                    <label><input type="radio" name="sex" value="女" v-model="modifylist.sex" class="xuanze">女</label>
			                                    <label><input type="radio" name="sex" value="未知" v-model="modifylist.sex" class="xuanze">未知</label>
			                                </td>
			                            </tr>
			                            <tr>
			                                <td>年龄</td>
			                                <td><input type="text" v-model="modifylist.age" class="shuru"></td>
			                            </tr>
			                            <tr>
			                                <td>爱好</td>
			                                <td>
			                                    <label><input type="checkbox" v-model="modifylist.hobby" value="篮球" class="xuanze">篮球</label>
			                                    <label><input type="checkbox" v-model="modifylist.hobby" value="读书" class="xuanze">读书</label>
			                                    <label><input type="checkbox" v-model="modifylist.hobby" value="插画" class="xuanze">插画</label>
			                                    <label><input type="checkbox" v-model="modifylist.hobby" value="编程" class="xuanze">编程</label>
			                                    <label><input type="checkbox" v-model="modifylist.hobby" value="弹琴" class="xuanze">弹琴</label>
			                                </td>
			                            </tr>
										</tbody>
			                        </table>
			                        <p>
			                            <input type="button" @click="changeActive" value="取消">
			                            <input type="button" @click="modify" value="保存">
			                        </p>
			                    </div>
			                </div>
			            </div>`,
			    computed: {
			        modifylist() {
			            return this.list;
			        }
			    },
			    methods: {
			        changeActive() {
			            this.$emit('change');
			        },
			        modify() {
			            this.$emit('modify', this.modifylist);
			        }
			    }
			});
			var app = new Vue({
			    el: '#app',
			    data: {
			        isActive: false, // 是否显示弹窗
			        selected: -1, // 选择了哪条记录
			        selectedlist: {}, // 选中的信息
			        slist: [],
			        searchlist: [],
			        list: [
			            {
			                username: '于治国',
			                no: '2017020743',
			                sex: '男',
			                age: '22',
			                hobby: ['篮球', '读书', '编程']
			            },
			            {
			                username: '李文杰',
			                no: '2017020719',
			                sex: '男',
			                age: '21',
			                hobby: ['弹琴', '读书', '插画']
			            },
			            {
			                username: '韩楚曦',
			                no: '2017020705',
			                sex: '女',
			                age: '20',
			                hobby: ['弹琴','插画']
			            },
			            {
			                username: '宋鑫淼',
			                no: '2017020116',
			                sex: '女',
			                age: '21',
			                hobby: ['篮球', '插画', '编程']
			            },
			            {
			                username: '高慧琳',
			                no: '2017020602',
			                sex: '女',
			                age: '20',
			                hobby: ['弹琴', '读书', '插画']
			            },
			            {
			                username: '杜茜',
			                no: '2017020403',
			                sex: '女',
			                age: '21',
			                hobby: ['读书','编程']
			            },
						{
						    username: '张三',
						    no: '2017020001',
						    sex: '男',
						    age: '19',
						    hobby: ['插画','编程']
						},
						{
						    username: '李四',
						    no: '2017020002',
						    sex: '女',
						    age: '21',
						    hobby: ['编程']
						},
						{
						    username: '王五',
						    no: '2017020003',
						    sex: '男',
						    age: '22',
						    hobby: ['插画','篮球']
						},
			        ],
					pagesize: 4,//每页显示的信息条数
					curpage:1,//当前页的页码
			    },
			    created() {
			        this.setSlist(this.list);
			    },
			    methods: {
			        // 修改数据
			        showOverlay(index) {
			            this.selected = index;
			            this.selectedlist = this.list[index];
			            this.changeOverlay();
			        },
			        // 点击保存按钮
			        modify(arr) {
						var nameze = /^[\u4e00-\u9fa5]{2,}$/,
							noze = /^\d{10}$/,
							ageze = /^\d{2}$/;
			            if (this.selected > -1) {
			                Vue.set(this.list, this.selected, arr);
			                this.selected = -1;
			            } else {
							for(let n = 0; n < this.list.length; n++){
								if (this.selectedlist.no == this.list[n].no){
									alert('学生信息重复，请重新确认！');
									return'';
								}else if(this.selectedlist.no == '' || this.selectedlist.username == '' || this.selectedlist.age == ''){
									alert('必填学生信息不能为空，请重新填写！');
									return'';
								}else if(!nameze.test(this.selectedlist.username)){
									alert('姓名格式不正确，请重新确认！');
									return'';
								}else if(!noze.test(this.selectedlist.no)){
									alert('学号格式不正确，请重新确认！');
									return'';
								}else if(!ageze.test(this.selectedlist.age)){
									alert('年龄格式不正确，请重新确认！');
									return'';
								}
							}
			                this.list.push(arr);
			            }
			            this.setSlist(this.list);
			            this.changeOverlay();
			        },
			        add: function() {
			            this.selectedlist = {
			                username: '',
			                no: '',
			                sex: '男',
			                age: '',
			                hobby: []
			            };
			            this.selected = -1;
			            this.isActive = true;
			        },
			        // delete list in index location
			        del(index) {
			            this.list.splice(index, 1);
			            this.setSlist(this.list);
			        },
			        changeOverlay() {
			            this.isActive = !this.isActive;
			        },
			        // 获取需要渲染到页面中的数据
			        setSlist(arr) {
			            this.slist = JSON.parse(JSON.stringify(arr));
			        },
			        // 搜索
			        search(e) {
			            var v = e.target.value,
			                self = this;
			            self.searchlist = [];
			            if (v) {
			                var ss = [];
			                // 过滤需要的数据
			                this.list.forEach(function(item) {
			                    if (item.username.indexOf(v) > -1) {
			                        if (self.searchlist.indexOf(item.username) == -1) {
			                            self.searchlist.push(item.username);
			                        }
			                        ss.push(item);
			                    } else if (item.no.indexOf(v) > -1) {
			                        if (self.searchlist.indexOf(item.no) == -1) {
			                            self.searchlist.push(item.no);
			                        }
			                        ss.push(item);
			                    } else if (item.sex.indexOf(v) > -1) {
			                        if (self.searchlist.indexOf(item.sex) == -1) {
			                            self.searchlist.push(item.sex);
			                        }
			                        ss.push(item);
			                    } else if (item.age.indexOf(v) > -1) {
			                        if (self.searchlist.indexOf(item.age) == -1) {
			                            self.searchlist.push(item.age);
			                        }
			                        ss.push(item);
			                    }
			                });
			                this.setSlist(ss); // 将过滤后的数据给了slist
			            } else {
			                // 没有搜索内容，则展示全部数据
			                this.setSlist(this.list);
			            }
			        },
					//上一页方法
					PrePage: function (event) {
					    $(".pagination .active").prev().trigger("click");
					},
					//下一页方法
					NextPage: function (event) {
					    $(".pagination .active").next().trigger("click");
					},
					//点击页码的方法
					NumPage: function (num, event) {
					    if (this.curpage == num) {
					        return;
					    }
					    this.curpage = num;
					    $(".pagination li").removeClass("active");
					    if (event.target.tagName.toUpperCase() == "LI") {
					        $(event.target).addClass("active");
					    }
					    else {
					        $(event.target).parent().addClass("active");
					    }
					    if (this.curpage == 1) {
					        $("#prepage").addClass("disabled");
					    }
					    else {
					        $("#prepage").removeClass("disabled");
					    }
					    if (this.curpage == Math.ceil(this.slist.length / this.pagesize)) {
					        $("#nextpage").addClass("disabled");
					    }
					    else {
					        $("#nextpage").removeClass("disabled");
					    }
					}
			    },
			    watch: {}
			});